<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 19:41:52
 * @LastEditors: wanlixin
 * @LastEditTime: 2019-10-04 19:41:52
 * @Description: 
 -->
<template>
  <grimm-page type="button-view" title="Checkbox-Group">
    <template slot="content">
      <div>
        <h1 class="example-page-title">默认样式</h1>
        <grimm-checkbox-group 
          v-model="checked"
          :options="options"
          :onChangeAfter="onChangeAfter"
        />
        checkbox-group:{{checked}}

        <h1 class="example-page-title">block样式</h1>
        <grimm-checkbox-group 
          v-model="checked2"
          :options="options"
          :onChangeAfter="onChangeAfter"
          fix="prefix"
          display
        />
        checkbox-group:{{checked2}}
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      checked: [],
      checked2: [],
      options: [
        {
          label: 'Checkbox1',
          value: 'o1',
        },
        {
          label: 'Checkbox2',
          value: 'o2',
        },
      ],
    };
  },
  methods: {
    onChangeAfter(vals, opts) {
      console.log(vals, opts);
    },
  },
  components: {
    GrimmPage,
  },
};
</script>
